<template>
    <div class="app-container">
        <el-form ref="queryForm" size="small" :inline="false" label-width="68px">
            <el-form-item>
                <el-input v-model="layerName"  placeholder="请输入图层名称" clearable></el-input>

            </el-form-item>
            <!--<el-form-item>
                <input type="file" multiple @change="fileChange">
            </el-form-item>
            <el-form-item>
                <div v-for="(item,i) in fileList">{{item}}</div>
            </el-form-item>-->
            <el-form-item>
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :http-request="loadShape"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="10"
                        :on-exceed="handleExceed"
                        :on-change="handleChange"
                        :auto-upload="false"
                        :file-list="fileList2">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传shapefile文件</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="imp" v-loading.fullscreen.lock="fullscreenLoading">文件入库</el-button>
                <el-button size="small" type="primary" @click="autoPublish">自动发布</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    //import {getPublicDataCatalogProperties, uploadShape} from "../../../api/cydtRequest";
    import {impShape, uploadShape,autoPublish} from "../../../api/cydtRequest";
    import bus from "../../../assets/js/eventBus";
    export default {
        name: "data-process",
        data(){
            return{
                path:"",
                layerName:"",
                fileList:[],
                fileList2:[],
                fileshp:null,
                fileName:"",
                fullscreenLoading: false,
            }
        },
        mounted() {

        },
        methods:{
            submitUpload(file, fileList) {
                this.$refs.upload.submit();

                //this.fileName=file.file.name;
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handleChange(file, fileList) {
                /*console.log(file);
                console.log(fileList);*/
                // 本地服务器路径
                console.log(URL.createObjectURL(file.raw));
                // 本地电脑路径
                console.log(document.getElementsByClassName("el-upload__input")[0].value);
                this.path=document.getElementsByClassName("el-upload__input")[0].value;
                this.fileList2=fileList;

                this.fileName=file.name;
               /* console.log("jjjjjjj");
                console.log(file.name);*/
                //this.fileshp=file;
            },

            //上传shape文件
            loadShape(file){
                var that=this

                let formData = new FormData();
                formData.append('file', file.file);
                uploadShape(formData).then(response => {
                    if (response.code == 200) {
                        that.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    }
                })

            },

            //上传shape文件
            /*fileChange(event){
                var that=this
                let shpFileList = event.target.files;
                //that.fileList = shpFileList;
                console.log(shpFileList)
                if(shpFileList.length>0){
                    for(let i=0;i<shpFileList.length;i++){
                        let formData = new FormData();
                        formData.append('file', shpFileList[i]);
                        uploadShape(formData).then(response=>{
                            if (response.code == 200) {
                                that.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                            }
                        })
                        that.fileList.push(shpFileList[i].name);
                    }



                }

            },*/
            //文件入库
            imp(){
                var that = this;
                var tableName = that.layerName;
                var fileName = that.fileName;
                fileName=fileName.substring(0,fileName.lastIndexOf("."));
                //console.log("filename:"+fileName)
                that.fullscreenLoading = true;
                impShape(tableName,fileName).then(response=>{

                    if (response.code == 200) {
                        that.fullscreenLoading = false;
                        that.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    }
                }).catch(e=>{
                    that.$message({
                        message:'文件入库失败',
                        type:'danger'
                    })
                });
            },


            //自动发布
            autoPublish(){
                var that=this
                var fileName = that.fileName;
                fileName=fileName.substring(0,fileName.lastIndexOf("."));
                autoPublish(fileName).then(response=>{
                    if (response) {
                        that.$message({
                            message: '恭喜你已经发布成功',
                            type: 'success'
                        });
                        //返回发布成功状态，刷新图面
                        bus.$emit("publishshpsta", true);
                    }
                })
            },

        },
    }
</script>

<style scoped>

</style>
